<template>
  <div id="double_teacher_manage" class="container">
    <div class="content">
      <div class="title">双师管理</div>
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-button type="primary" @click="synchroCourse">同步英语双师课程</el-button>
          </div>
        </div>
        <div class="feibo_course">
          <div class="feibo_course_title">
            <div class="feibo_course_title_name">飞博课程数据</div>
            <div class="feibo_course_title_setting">
              <el-checkbox v-model="isAllOrgCourse" @change="changeAll">全部设为机构课程</el-checkbox>
            </div>
          </div>
          <div class="line"></div>
          <div class="feibo_course_item" v-for="item in teacherCourseList" :key="item.teacher2CourseName">
            <div class="feibo_course_item_left">
              <div class="feibo_course_item_img" :style="{ background: item.teacher2CoursePic_show }"></div>
              <div class="feibo_course_item_data">
                <div class="item_data_name">{{ item.teacher2CourseName }}</div>
                <!-- <div class="item_data_type">适用：{{ item.teacher2CourseObjectTypeName }}</div> -->
                <div class="item_data_type">共{{ item.courseHour }}个课节 {{ item.oneHourMinutes }}分钟/课节</div>
              </div>
            </div>
            <div class="feibo_course_item_right">
              <div class="item_right_setting">
                <el-checkbox v-model="item.isShowCheckBox" @change="checkChange($event, item)" :disabled="item.isUseByCourse == '1'">设为机构课程</el-checkbox>
              </div>
              <el-button @click="syllabusSet(item)" v-if="item.isUse == 1">资源设置</el-button>
            </div>
          </div>
          <el-pagination v-if="tabledisplayObj.total > 5" class="page" layout="total, prev, pager, next, jumper"
            :current-page="tabledisplayObj.currPage" @current-change="tabledisplayChangePage" :page-size="tabledisplayObj.pageSize"
            :total="tabledisplayObj.total"></el-pagination>
          <div class="line"></div>
          <div class="feibo_course_title">
            <div class="feibo_course_title_name" style="margin-top:0.2rem;">课程价格设置</div>
          </div>
          <div class="course_price" v-for="item in teacherCourseSetList" :key="item.foreignTeacherTypeName">
            <span style="width:1rem;display:-moz-inline-box; display:inline-block;">{{ item.foreignTeacherTypeName }}</span>
            <el-input placeholder="请输入金额" style="width:20%;margin-left:0.05rem;" maxlength="9" onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
              oninput="value=value.replace(/[^\d]/g,'')" v-model="item.oneSyllabusPrice">
              <template slot="append">
                元
              </template>
            </el-input>
            /节课
            <span style="margin-left:0.5rem;">
              （{{ item.foreignTeacherMinutes }}分钟外教+{{ item.oneHourMinutes - item.foreignTeacherMinutes }}分钟中教+{{
								item.chineseTeacherMinutes - (item.oneHourMinutes - item.foreignTeacherMinutes)
							}}分钟中教）
            </span>
          </div>

          <div class="btn_submit">
            <el-button type="primary" @click="submit">确定设置</el-button>
          </div>
        </div>
      </div>
    </div>
    <teacherSyllabus ref="teacherSyllabus" @callback="closeTeacherSyllabus"></teacherSyllabus>
  </div>
</template>

<script>
  import teacherSyllabus from './common/teacher_syllabus';
  let vm;
  let user;
  export default {
    data() {
      return {
        isAllOrgCourse: true, //是否全选
        input2: '',
        tabledisplayObj: {
          currPage: 1,
          pageSize: 5,
          total: 0
        },
        teacherCourseList: [], //双师课程数据
        teacherCourseSetList: [] //双师教师数据
      };
    },
    components: {
      teacherSyllabus
    },
    methods: {
      syllabusSet(item) {
        console.log(item);
        vm.$refs.teacherSyllabus.init({
          courseTeaacher2Id: item.courseTeaacher2Id
        });
      },
      /**
       * 关闭课节设置
       */
      closeTeacherSyllabus() {},
      /**
       * 确认设置
       */
      submit() {
        api.teacherSetBatchUpdate(vm.teacherCourseSetList).then(function(data) {
          if (data.resultCode == 2000) {
            tool.message({
              showClose: true,
              message: '设置成功',
              type: 'success'
            });
          } else {
            vm.$message.error(data.message);
          }
        });
      },
      /**
       * 所有状态改变
       */
      changeAll(val) {
        let changeingCourseList = []; //要改变状态的课程数组
        if (val) {
          vm.teacherCourseList.forEach(item => {
            if (item.isUse == 0) {
              changeingCourseList.push(item.courseTeaacher2Id);
            }
          });
        } else {
          vm.teacherCourseList.forEach(item => {
            if (item.isUse == 1 && item.isUseByCourse != 1) {
              changeingCourseList.push(item.courseTeaacher2Id);
            }
          });
        }
        let paras = {
          courseTeaacher2Ids: changeingCourseList,
          isUse: val ? 1 : 0
        };
        api.teacherToogleStatus(paras).then(function(data) {
          if (data.resultCode == 2000) {
            vm.getTeacherCourseList(vm.tabledisplayObj);
          } else {
            vm.$message.error(data.message);
          }
        });
      },
      /**
       * 状态改变
       */
      checkChange(val, item) {
        console.log(val, item);
        let paras = {
          courseTeaacher2Ids: [item.courseTeaacher2Id],
          isUse: val ? 1 : 0
        };
        api.teacherToogleStatus(paras).then(function(data) {
          if (data.resultCode == 2000) {
            vm.getTeacherCourseList(vm.tabledisplayObj);
          } else {
            vm.$message.error(data.message);
            item.isShowCheckBox = !item.isShowCheckBox;
          }
        });
      },
      /**
       * 初始化数据
       */
      initData() {
        vm.getTeacherCourseList(vm.tabledisplayObj);
        vm.getTeacherCourseSetList();
      },
      /**
       * 获取双师教师数据
       */
      getTeacherCourseSetList() {
        api.getTeacherCourseSetList().then(function(data) {
          if (data.resultCode == 2000) {
            vm.teacherCourseSetList = data.list;
          } else {
            vm.$message.error(data.message);
          }
        });
      },
      /**
       * 获取双师课程
       */
      getTeacherCourseList(params) {
        api.getTeacherCourseByOrgList(params).then(function(data) {
          if (data.resultCode == 2000) {
            vm.isAllOrgCourse = true;
            data.list.forEach(item => {
              item.teacher2CoursePic_show =
                item.photo == "" || null ?
                'url(' + require('../../assets/img/common/course_default.png') +
                ') no-repeat center top /1.6rem 1rem' :
                'url(' + item.photo + ') no-repeat center top /1.6rem 1rem';
              item.isShowCheckBox = item.isUse == 1;
              if (vm.isAllOrgCourse) {
                vm.isAllOrgCourse = item.isUse == 1;
              }
            });
            vm.teacherCourseList = data.list;
            vm.tabledisplayObj.total = data.totalCount;
          } else {
            vm.$message.error(data.message);
          }
        });
      },
      /**
       * 同步课程
       */
      synchroCourse() {
        let loading = vm.$loading({
          target: document.querySelector('#double_teacher_manage'),
          text: "正在同步，请稍后...",
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        api.syncFeiBo().then(function(data) {
            if (data.resultCode == 2000) {
              return api.syncTeacherCourse();
            } else {
              vm.$message.error(data.message);
            }
          })
          .then(function(data) {
            if (data.resultCode == 2000) {
              tool.message({
                showClose: true,
                message: '同步课程成功',
                type: 'success'
              });
              loading.close();
              vm.getTeacherCourseList(vm.tabledisplayObj);
            } else {
              vm.$message.error(data.message);
            }
          });
      },
      /**
       * 翻页
       */
      tabledisplayChangePage(val) {
        vm.tabledisplayObj.currPage = val;
        vm.getTeacherCourseList(vm.tabledisplayObj);
      }
    },
    mounted() {
      vm = this;
      user = tool.getItem(lsKey.user, true); //得到当前用户信息
      let dicdata = tool.getItem(lsKey.dict, true);
      this.initData();
    },
    computed: {}
  };
</script>

<style lang="scss">
  #double_teacher_manage {
    .el-input__inner {
      border-radius: 0.08rem;
      font-size: 0.16rem;
      color: #666666;
      height: 0.36rem;
      line-height: 0.36rem;
    }

    .el-input__icon {
      line-height: 0.36rem;
    }

    .input_search {
      .el-input__inner {
        background-color: rgb(247, 248, 250);
      }
    }

    .panel {
      padding: 0.1rem 0.5rem;

      .condition {
        margin-bottom: 0.2rem;

        .row_item {
          font-size: 0.2rem;
          color: #666666;
          margin-right: 0.1rem;
        }
      }

      .feibo_course {
        color: #666666;
        font-size: 0.16rem;

        .feibo_course_title {
          overflow: hidden;
          width: 100%;

          .feibo_course_title_name {
            color: #999999;
            font-size: 0.14rem;
            float: left;
          }

          .feibo_course_title_setting {
            float: right;

            .el-checkbox__label {
              line-height: 0.24rem;
              font-size: 0.16rem;
            }
          }
        }

        .line {
          width: 100%;
          height: 1px;
          background-color: #ededed;
          margin: 0.05rem 0;
        }

        .feibo_course_item {
          color: #666666;
          font-size: 0.16rem;
          width: 100%;
          overflow: hidden;
          margin-top: 0.1rem;

          .feibo_course_item_left {
            float: left;
            height: 1rem;
            overflow: hidden;

            .feibo_course_item_img {
              float: left;
              width: 1.6rem;
              height: 1rem;
              border-radius: 0.04rem;
            }

            .feibo_course_item_data {
              float: left;
              height: 1rem;
              margin-left: 0.1rem;

              .item_data_name {
                margin-top: 0.04rem;
              }

              .item_data_type {
                margin-top: 0.5rem;
              }
            }
          }

          .feibo_course_item_right {
            margin-top: 0.2rem;
            float: right;
            height: 1rem;

            .item_right_setting {
              margin-bottom: 0.1rem;
            }

            .el-button {
              padding: 0.1rem 0.22rem 0.1rem 0.22rem;
              font-size: 0.16rem;
            }
          }
        }

        .course_price {
          margin-top: 0.2rem;

          .el-input-group__append,
          .el-input-group__prepend {
            background-color: #ffffff;
            color: #666666;
            border: 0rem solid #ffffff;
            font-size: 0.16rem;
            padding: 0 0.1rem;
          }
        }

        .btn_submit {
          width: 60%;
          text-align: center;
          margin: 0.3rem 0;

          .el-button {
            padding: 0.12rem 0.22rem;
            font-size: 0.16rem;
          }
        }
      }
    }
  }
</style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
  .right_btn {
    background-image: url(../../assets/img/clue_manage/add_white.png);
    width: 1.54rem;
  }
</style>
